<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>我的积分</h1>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="integral">
      <div class="bg">
        <div class="card">
          <div class="div1">当前可兑换积分</div>
          <div class="div2">
            <span>10000</span
            ><button type="button" @click="show1 = true">兑换</button>
          </div>
        </div>
        <div class="total">积分记录：累计获得积分100000，共10笔</div>
      </div>

      <div class="list">
        <div class="item">
          <div class="top">
            <p>推文原创奖励-【文章名】</p>
            <p>+100.00</p>
          </div>
          <div class="bottom">
            <p>2020.01.02 14:20</p>
            <p>已入账</p>
          </div>
        </div>
      </div>

      <yd-popup v-model="show1" position="center" width="100%">
        <div class="inPopup">
          <div class="title">VIP积分兑换</div>
          <ul class="content">
            <li>1. 关注【脉客蜂】公众号</li>
            <li>2. 在【积分兑换】中兑换哦</li>
          </ul>
          <div class="btn" @click="show1 = false">我知道了</div>
        </div>
      </yd-popup>
    </div>
  </div>
</template>

<script>
import { Popup } from "vue-ydui/dist/lib.rem/popup";
export default {
  name: "",
  components: {
    ydPopup: Popup
  },
  props: {},
  data: function() {
    return {
      show1: false
    };
  },
  mounted: function() {},
  methods: {}
};
</script>

<style scoped>
.integral .bg {
  background: #2a2631;
  padding: 0.4rem 0 0;
}

.integral .card {
  width: 6.72rem;
  height: 2.22rem;
  margin: 0 auto 0.22rem;
  background: url(../../assets/images/mkf/integralBg.png) top left no-repeat;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.integral .card .div1 {
  font-size: 0.32rem;
  padding-bottom: 0.18rem;
  color: #efc8b0;
}
.integral .card .div2 {
  font-size: 0.6rem;
  line-height: 0.7rem;
  color: #efc8b0;
  height: 0.7rem;
  position: relative;
  width: 100%;
  text-align: center;
}
.integral .card .div2 button {
  display: block;
  width: 1rem;
  height: 0.48rem;
  font-size: 0.28rem;
  color: #2a2631;
  line-height: 0.48rem;
  background-image: linear-gradient(
      90deg,
      #fae9dc 0%,
      #f1cfb9 85%,
      #e8b596 100%
    ),
    linear-gradient(#efc8b0, #efc8b0);
  background-image: -webkit-linear-gradient(
      0deg,
      #fae9dc 0%,
      #f1cfb9 85%,
      #e8b596 100%
    ),
    linear-gradient(#efc8b0, #efc8b0);
  background-blend-mode: normal, normal;
  position: absolute;
  right: 0.4rem;
  bottom: 0.11rem;
  border-radius: 0.24rem;
}
.integral .total {
  padding: 0 0.2rem;
  height: 0.6rem;
  line-height: 0.6rem;
  height: 0.6rem;
  font-size: 0.24rem;
  color: #666666;
}

.integral .list {
  padding-bottom: 0.6rem;
}
.integral .list .item {
  width: 7.1rem;
  margin: 0 auto;
  border-bottom: 1px solid rgba(238, 238, 238, 0.1);
  padding: 0.38rem 0 0.34rem;
}
.integral .list .item .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.integral .list .item .top p:first-child {
  width: 4.8rem;
  font-size: 0.28rem;
  line-height: 0.32rem;
  color: #ffffff;
  min-height: 0.32rem;
}
.integral .list .item .top p:last-child {
  font-size: 0.28rem;
  font-weight: bold;
  line-height: 0.32rem;
  color: #deaa8a;
}
.integral .list .item .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.14rem;
  font-size: 0.24rem;
  line-height: 0.32rem;
  color: #666666;
}

.inPopup {
  width: 6.3rem;
  height: 4.45rem;
  background-color: #32303a;
  border-radius: 0.12rem;
  overflow: hidden;
  margin: 0 auto;
}
.inPopup .title {
  height: 0.98rem;
  line-height: 0.98rem;
  text-align: center;
  border-bottom: 1px solid rgba(238, 238, 238, 0.1);
  font-size: 0.32rem;
  color: #ffffff;
}
.inPopup .content {
  padding: 0.48rem 0;
}
.inPopup .content li {
  margin-left: 1.42rem;
  font-size: 0.28rem;
  line-height: 0.32rem;
  padding: 0.18rem 0;
  color: #ffffff;
}
.inPopup .btn {
  width: 5.36rem;
  height: 0.72rem;
  line-height: 0.72rem;
  text-align: center;
  background-color: #deaa8a;
  border-radius: 0.36rem;
  font-size: 0.28rem;
  color: #2a2631;
  margin: 0 auto;
}
</style>
